<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增货物参数')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />

    <link th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/summernote/summernote-bs3.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-goodparameter-add">
            <!--<div class="form-group">-->
                <!--<label class="col-sm-3 control-label">货物分类：</label>-->
                <!--<div class="col-sm-8">-->
                    <!--<div class="input-group">-->
                        <!--<input class="form-control" type="text" onclick="selectDeptTree()" id="treeName" readonly="true" th:value="${dept.deptName}">-->
                        <!--<span class="input-group-addon"><i class="fa fa-search"></i></span>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <div class="form-group" id="subFather">
                <label class="col-sm-3 control-label">货物类型：</label>
                <div class="col-sm-4" >
                    <select  class="type form-control m-b" id="father" data-first-title="请选择">
                        <option value="">请选择</option>
                        <!--<option th:each="dict : ${goodsTypes}" th:text="${dict.bigTpeName}" th:value="${dict.bigGoodsType}"></option>-->
                    </select>
                    <!--<input name="goodsId" class="form-control" type="text">-->
                </div>
                <div class="col-sm-4">
                    <select class="router form-control m-b" id="goodsId" name="goodsId" data-first-title="请选择" th:onchange="'javascript:selectGoodsbyType();'">
                        <option value="">请选择</option>
                    </select>
                </div>

            </div>
            <!--<div class="form-group">    -->
                <!--<label class="col-sm-3 control-label">供应商ID：</label>-->
                <!--<div class="col-sm-8">-->
                    <!--<input name="supplierId" class="form-control" type="text">-->
                <!--</div>-->
            <!--</div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label">商品名称：</label>
                <div class="col-sm-8">
                    <!--<select name="goodName" class="form-control m-b" id="goodName" >-->
                        <!--&lt;!&ndash;<option th:each="goods : ${goods}" th:text="${goods.goodsName}" th:value="${goods.goodsId}"></option>&ndash;&gt;-->
                    <!--</select>-->
                    <input name="goodName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">入围价格：</label>
                <div class="col-sm-8">
                    <!--<select name="goodName" class="form-control m-b" id="goodName" >-->
                    <!--&lt;!&ndash;<option th:each="goods : ${goods}" th:text="${goods.goodsName}" th:value="${goods.goodsId}"></option>&ndash;&gt;-->
                    <!--</select>-->
                    <input name="goodPrice" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">商品品牌：</label>
                <div class="col-sm-8">
                    <input name="attribite3" class="form-control" type="text">
                </div>
            </div>
            <!--<div class="form-group">    -->
                <!--<label class="col-sm-3 control-label">参数：</label>-->
                <!--<div class="col-sm-8">-->
                    <!--<input name="goodParameters" class="form-control" type="text">-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">    -->
                <!--<label class="col-sm-3 control-label">商品状态：</label>-->
                <!--<div class="col-sm-8">-->
                    <!--<div class="radio-box">-->
                        <!--<input type="radio" id="goodStatus1" name="goodStatus"  value="1">-->
                        <!--<label for="goodStatus1" th:text="可用"></label><br/>-->
                        <!--<input type="radio" id="goodStatus2" name="goodStatus" value="0">-->
                        <!--<label for="goodStatus2" th:text="不可用"></label>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<label class="col-sm-3 control-label">产品图片：</label>-->
                <!--<div class="col-sm-8">-->
                    <!--<input id="goodsDescribe" name="goodsDescribe" type="hidden">-->
                    <!--<div class="shangpinmiaoshu"></div>-->

                <!--</div>-->
            <!--</div>-->
            <div id="computer" style="display: none;">
                <div class="form-group" id="chicun">
                    <label class="col-sm-3 control-label">屏幕尺寸：</label>
                    <div class="col-sm-8">
                        <input id="pmchicun" class="form-control" name="pmchicun" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">处理器：</label>
                    <div class="col-sm-8">
                        <input id="chuliqi" class="form-control" name="chuliqi" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">操作系统：</label>
                    <div class="col-sm-8">
                        <input id="caozuoxitong" class="form-control" name="caozuoxitong" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">显示器：</label>
                    <div class="col-sm-8">
                        <input id="xianshiqi" class="form-control" name="xianshiqi" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">内存：</label>
                    <div class="col-sm-8">
                        <input id="neicun" class="form-control" name="neicun" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">硬盘：</label>
                    <div class="col-sm-8">
                        <input id="yingpan" class="form-control" name="yingpan" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">显卡：</label>
                    <div class="col-sm-8">
                        <input id="xianka" class="form-control" name="xianka" type="text">
                    </div>
                </div>
                <div class="form-group" id="zhongliang">
                    <label class="col-sm-3 control-label">笔记本重量：</label>
                    <div class="col-sm-8">
                        <input id="bjbzhongliang" class="form-control" name="bjbzhongliang" type="text">
                    </div>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">参数：</label>
                <div class="col-sm-8">
                    <!--<input id="other" name="other" type="hidden">-->
                    <!--<div class="shangpinmiaoshu"></div>-->
                    <textarea class="form-control" id="other" name="other" rows="3"></textarea>

                </div>
            </div>
            <div class="form-group options">
                <label class="col-sm-3 control-label">配选件：</label>
                    <div class="col-sm-3">
                        <input name="optionsName" class="form-control" type="text" placeHolder="请输入配选件名" maxlength="20" style="width: 90%;" />
                    </div>
                    <div class="col-sm-4">
                        <input name="variablePrice" type="text" placeHolder="请输入差价(元)" maxlength="9" class="form-control number" style="width: 75%;" onblur="priceChange()"/>
                    </div>
                <div class="col-sm-2">
                    <!--<a class="a-inline-block add_img" onclick="addOption()"></a>-->
                    <button type="button" class="btn btn-success" onclick="addOption()" >+</button>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">产品图片：</label>
                <div class="col-sm-8">
                    <!--<input name="imageUrl" class="form-control" type="text">-->
                    <div class="file-loading">
                        <input id="fileinput-demo-1" name="file" type="file" multiple>
                    </div>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="remarks" class="form-control" type="text">
                </div>
            </div>
            <!--<input name="goodParameters" class="form-control" type="hidden">-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jquery-cxselect-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
    <script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "system/goodparameter";
        var imageUrl =new Array();
        jQuery.extend({
            stringify  : function stringify(obj) {
                var t = typeof (obj);
                if (t != "object" || obj === null) {
                    // simple data type
                    if (t == "string") obj = '"' + obj + '"';
                    return String(obj);
                } else {
                    // recurse array or object
                    var n, v, json = [], arr = (obj && obj.constructor == Array);

                    for (n in obj) {
                        v = obj[n];
                        t = typeof(v);
                        if (obj.hasOwnProperty(n)) {
                            if (t == "string") v = '"' + v + '"';
                            else if (t == "object" && v !== null) v = jQuery.stringify(v);
                            json.push((arr ? "" : '"' + n + '":') + String(v));
                        }
                    }
                    return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
                }
            }
        });
        $(document).ready(function(){
            $("#fileinput-demo-1").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl':  "/common/upload2",
                overwriteInitial: false,
                initialPreviewAsData: true,

                /*initialPreview: [
                 "/img/profile.jpg"
                 ]*/
            });
            $("#fileinput-demo-1").on("fileuploaded", function(event, data, previewId, index) {
                imageUrl.push(data.response.fileName);
            });
            $("#fileinput-demo-1").on('filedelete', function(event, id) {
                alert('文件删除');
            })
            $('#fileinput-demo-1').on('filesuccessremove', function(event, id) {
                console.log('filesuccessremove')
            });
            var data = [[${goodsTypes}]];
//            var sondata=data[0].smallList
            $('#subFather').cxSelect({
                selects: ['type', 'router'],
                jsonValue: 'bigGoodsType',
                jsonName: 'bigTpeName',
                jsonSub:'smallList',
                data: data
            });

        });
//        $('.shangpinmiaoshu').summernote({
//            height: '220px',
//            lang: 'zh-CN',
//            callbacks: {
//                onImageUpload: function (files) {
//                    sendFile(files[0], this);
//                }
//            }
//        });
//        function changeGoods(){
//            var goodsId = $("#goodsName option:selected").attr("data-value");
//            console.log(goodsId);
//        }
        function selectType(){
            // 直接返回获取
            var data = [[${goodsTypes}]];
            var sondata=[];
            var selectFather=$('#father').val();
            for(var i=0;i<data.length;i++){
                if(data[i].bigGoodsType==selectFather){
                    sondata=data[i].smallList;
                }
            }
            $('#subFather').cxSelect({
                selects: ['type', 'router'],
                jsonValue: 'bigGoodsType',
                jsonName: 'bigTpeName',
                data: sondata
            });
        }

        // 上传文件
        function sendFile(file, obj) {
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        $(obj).summernote('editor.insertImage', result.url, result.fileName);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        }


        $("#form-goodparameter-add").validate({
            focusCleanup: true
        });
        function selectGoodsbyType(){
            var goodsId = $("#goodsId option:selected").val();
            console.log(goodsId)
            if(goodsId=='3'){
                $("#computer").css("display","block");
                $("#chicun").css("display","none");
                $("#zhongliang").css("display","none");
            }else if(goodsId=='4'){
                $("#computer").css("display","block");
                $("#chicun").css("display","block");
                $("#zhongliang").css("display","block");
            }else{
                $("#computer").css("display","none");
            }
//
//            $.ajax({
//                type: "POST",
//                url: "/system/goods/goodslist",
//                dataType:"json",
//                data: {goodsId:goodsId},
//                success: function(data1){
//                    console.log(data1)
//                    var html="";
//                    for(var i=0;i<data1.length;i++){
//                        html+='<option data-value="'+data1[i].goodsId+'" value='+data1[i].goodsName+'>'+data1[i].goodsName+'</option>';
//
//                    }
//                    $("#goodName").html(html);
//                }
//
//            });
        }
        function submitHandler() {
            if ($.validate.form()) {
//                var sHTML = $('.shangpinmiaoshu').summernote('code');
//                $("#other").val(sHTML);
                var goodParameters={};
                var pmchicun=$("#pmchicun").val();
                goodParameters.pmchicun=pmchicun;
                var chuliqi=$("#chuliqi").val();
                goodParameters.chuliqi=chuliqi;
                var caozuoxitong=$("#caozuoxitong").val();
                goodParameters.caozuoxitong=caozuoxitong;
                var xianshiqi=$("#xianshiqi").val();
                goodParameters.xianshiqi=xianshiqi;
                var neicun=$("#neicun").val();
                goodParameters.neicun=neicun;
                var yingpan=$("#yingpan").val();
                goodParameters.yingpan=yingpan;
                var xianka=$("#xianka").val();
                goodParameters.xianka=xianka;
                var bjbzhongliang=$("#bjbzhongliang").val();
                goodParameters.bjbzhongliang=bjbzhongliang;
                var other=$("#other").val();
//                goodParameters.other=other.replace(/&/g,"%26");;
                goodParameters.other=other
//                $("#goodParameters").val(JSON.stringify(goodParameters));
                console.log(goodParameters)

                var optionsName=$("input[name='optionsName']");
                var variablePrice=$("input[name='variablePrice']")

                var parameter=[];
                $("input[name='optionsName']").each(function(index,item){
                    parameter.push({optionsName:$(this).val(),variablePrice:$("#variablePrice_"+index).val()})
                })
                var str=JSON.stringify(goodParameters);
                console.log(str)
                str= str.replace(/&/g,"%26")
                $.operate.save(prefix + "/add", $('#form-goodparameter-add').serialize()+"&goodParameters="+ encodeURIComponent(JSON.stringify(goodParameters))+"&withoption="+JSON.stringify(parameter)+"&imageUrl="+JSON.stringify(imageUrl));

            }
        }
        function addOption(){

            var str = '' +
                    '<div class="form-group options" >' +
                    '<label class="col-sm-3 control-label">&nbsp;</label>' +
                    '<div class="col-sm-3"><input name="optionsName" class="form-control" type="text" placeHolder="请输入配选件名" maxlength="60" style="width: 90%;" /></div>' +
                    '<div class="col-sm-4"><input name="variablePrice" class="form-control" type="text" placeHolder="请输入差价" maxlength="9" class="number" style="width: 75%;" onblur="priceChange()"/></div>' +
                    '<div class="col-sm-2">' +
                     '<button type="button" class="btn btn-danger" onclick="reduceOption(this)">-</button>'
//                    '<a class="a-inline-block reduce_img" onclick="reduceOption(this)"></a>' +
                    '</div>' +
                    '</div>';
            $("div.options:last").after(str);
            $("input[name='variablePrice']").each(function(i){
                $(this).attr("id","variablePrice_"+i);
            });
        }
        function reduceOption(obj){
            $(obj).closest("dl").remove();
        }
        function priceChange(){
            var prices = 0;
            $("input[name='variablePrice']").each(function(){
                var price = parseInt($(this).val());
                if(price && price != "NaN"){
                    prices += price;
                }
            });
            var pric = parseInt($("input[name='price']").val());
            if(pric && pric != "NaN"){
                prices += pric;
            }
            $("input[name='offerAmount']").val(prices);
        }
    </script>
</body>
</html>